<template>
  <h1 style="font-size: 1.25rem; margin-bottom: 1.25rem">币币兑换</h1>

  <el-card style="padding: 1.25rem 2.25rem" v-loading="loading">
    <div style="width: 100%; text-align: right">
      {{ $t("余额") }}: {{ fromSelectCoinInfo.balance }}
      {{ fromSelectCoinInfo.coin_name }}
    </div>
    <el-form label-position="top" style="width: 100%; padding: 2.25rem 0">
      <el-form-item :label="$t('从')">
        <div class="selectCoinItem">
          <el-input size="large" type="number" v-model="quantity"></el-input>
          <el-select
            size="large"
            v-model="fromSelectCoinInfo.coin_name"
            @change="changeFromCoin"
          >
            <el-option
              v-for="item in fromCoins"
              :key="item.coin_name"
              :label="item.coin_name"
              :value="item.coin_name"
            >
              <div style="display: flex; align-items: center">
                <img :src="item.icon" style="width: 1.25rem; height: 1.25rem" />
                <span style="margin-left: 5px"> {{ item.coin_name }}</span>
              </div>
            </el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="sortBtn">
          <el-button
            size="large"
            icon="sort"
            type="primary"
            circle
            @click="exChangeCoins"
          >
          </el-button>
        </div>
      </el-form-item>
      <el-form-item :label="$t('至')">
        <div class="selectCoinItem">
          <el-input size="large" v-model="toQuantity"></el-input>
          <el-select
            size="large"
            v-model="toSelectCoinInfo.coin_name"
            @change="changeToCoin"
          >
            <el-option
              v-for="item in fromSelectCoinInfo.symbols"
              :key="item.coin_name"
              :label="item.coin_name"
              :value="item.coin_name"
            >
              <div style="display: flex; align-items: center">
                <img :src="item.icon" style="width: 1.25rem; height: 1.25rem" />
                <span style="margin-left: 5px"> {{ item.coin_name }}</span>
              </div>
            </el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="flex justify-between" style="width: 100%">
          <span>价格</span>
          <span>
            1 {{ fromSelectCoinInfo.coin_name }} =
            {{ toSelectCoinInfo.base_price }} {{ toSelectCoinInfo.coin_name }}
          </span>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button
          style="width: 100%"
          size="large"
          type="primary"
          @click="confirmForm"
        >
          {{ $t("确认") }}
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-drawer v-model="showSonDrawer" :title="$t('确认订单')" size="35%">
    <el-card>
      <div class="confirmCoinRow">
        <span class="rowName">
          <img
            :src="fromSelectCoinInfo.icon"
            style="width: 1.25rem; height: 1.25rem"
          />
          <span>{{ fromSelectCoinInfo.coin_name }}</span>
        </span>
        <span class="rowValue">{{ quantity }}</span>
      </div>
      <div class="confirmCoinRow">
        <span class="rowName">
          <img
            :src="toSelectCoinInfo.icon"
            style="width: 1.25rem; height: 1.25rem"
          />
          <span>{{ toSelectCoinInfo.coin_name }}</span>
        </span>
        <span class="rowValue">{{ toQuantity }}</span>
      </div>
      <div class="confirmCoinRow">
        <span class="rowName">{{ $t("价格") }}</span>
        <span class="rowValue"
          >1 {{ fromSelectCoinInfo.coin_name }} =
          {{ toSelectCoinInfo.base_price }}
          {{ toSelectCoinInfo.coin_name }}</span
        >
      </div>
      <div class="confirmCoinRow">
        <span class="rowName">{{ $t("数量") }}</span>
        <span class="rowValue">{{ quantity }}</span>
      </div>
      <div class="confirmCoinRow">
        <span class="rowName">{{ $t("手续费") }}</span>
        <span class="rowValue">0</span>
      </div>

      <el-button
        style="width: 100%"
        size="large"
        type="primary"
        @click="submitForm"
      >
        {{ $t("确认") }}
      </el-button>
    </el-card>
  </el-drawer>

  <swapOrderDetailDrawer
    :show="isShoOrderDetail"
    :orderNo="currentOrderNo"
    from="send"
    @close="
      () => {
        isShoOrderDetail = false;
        currentOrderNo = '';
      }
    "
  />
</template>
<script setup>
import swapOrderDetailDrawer from "./components/swapOrderDetailDrawer.vue";
import { ref, reactive, watch, computed } from "vue";
import {
  postSwapMarketApi,
  getSwapSymbolsApi,
  getSwapOrderDetailApi,
} from "@/api/swap/index";
import _ from "lodash";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const loading = ref(true);
// 全部的币种列表
const coinList = ref([]);
// form币种列表
const fromCoins = ref([]);
//选择币种
const fromSelectCoinInfo = reactive({});
const toSelectCoinInfo = reactive({});
//数量
const quantity = ref(0);
const toQuantity = computed(() => {
  return quantity.value * toSelectCoinInfo.base_price;
});
watch(coinList, (newVal) => {
  if (newVal.length > 0) {
    fromCoins.value = newVal;
    setFormSelectCoin(fromCoins.value[0]);
  }
});
// 监听form币种数据，获取to币种列表和当前选择的to币种信息
watch(
  () => fromSelectCoinInfo,
  (newVal) => {
    if (newVal.symbols.length) {
      setToSelectCoin(newVal.symbols[0]);
    }
  },
  { deep: true }
);

// 获取币种列表
const getSwapSymbolsInfo = async (name) => {
  try {
    loading.value = true;
    const symbolsRes = await getSwapSymbolsApi();
    if (symbolsRes?.length) {
      coinList.value = symbolsRes;
      setFormSelectCoin(fromCoins.value[0]);
    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
    console.log(e);
  }
};
getSwapSymbolsInfo();

// 设置from币种信息
const setFormSelectCoin = (data) => {
  for (const item in data) {
    fromSelectCoinInfo[item] = data[item];
  }
};
//设置to币种信息
const setToSelectCoin = (data) => {
  for (const item in data) {
    toSelectCoinInfo[item] = data[item];
  }
};

const changeFromCoin = (e) => {
  setFormSelectCoin(fromCoins.value.find((i) => i.coin_name === e));
};
const changeToCoin = (e) => {};
const exChangeCoins = () => {
  setFormSelectCoin(
    fromCoins.value.find((i) => i.coin_name === toSelectCoinInfo.coin_name)
  );
  quantity.value = toQuantity.value;
};
const showSonDrawer = ref(false);
const form = computed(() => {
  return {
    from_coin_name: fromSelectCoinInfo.coin_name,
    to_coin_name: toSelectCoinInfo.coin_name,
    quantity: quantity.value,
  };
});
const confirmForm = async () => {
  try {
    if (!quantity.value) {
      return ElMessage({
        showClose: false,
        message: t("请输入兑换数量"),
        type: "error",
        grouping: true,
      });
    }
    if (quantity.value > Number(fromSelectCoinInfo.balance)) {
      return ElMessage({
        showClose: false,
        message: t("您当前币种可用余额不足"),
        type: "error",
        grouping: true,
      });
    }
    showSonDrawer.value = true;
  } catch (e) {
    console.log(e);
  }
};
const isShoOrderDetail = ref(false);
const currentOrderNo = ref("");
const submitForm = async () => {
  try {
    const { order_no } = await postSwapMarketApi(form.value);
    if (order_no) {
      showSonDrawer.value = false;
      isShoOrderDetail.value = true;
      currentOrderNo.value = order_no;

      quantity.value = 0;
    }
  } catch (e) {
    console.log(e);
  }
};
</script>
<style lang="scss">
.selectCoinItem {
  width: 100%;
  padding: 1.25rem;
  background: #f1f1f1;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}
.sortBtn {
  display: flex;
  justify-content: center;
  width: 100%;
}
.confirmCoinRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  .rowName {
    width: 30%;
    flex-shrink: 0;
    display: flex;
  }
  .rowValue {
    width: 50%;
    text-align: right;
    word-break: break-all;
  }
}
</style>
